<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="50%"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-scrollbar>
      <div class="evaluation-body">
        <el-row class="item-row" v-for="item in this.list" :key="item.id">
          <el-col :span="24">
            <div>
              评价描述：
              <p>{{ item.evaluationText }}</p>
              评价时间：
              <span>{{
                parseTime(item.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
              }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>

    <el-form ref="form" :model="form" :rules="rules" label-width="0px">
      <el-form-item prop="evaluationText">
        <span style="font-weight: bolder">评价描述</span>
        <el-input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          placeholder="请输入内容"
          v-model="form.evaluationText"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="saveLoading"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getClasses, getClassesStudentPage } from "@/api/teacherSide/classes";
import common from "@/api/collegebase/common";
import { createEvaluation, searchEvaluation } from "@/api/study/evaluation";
export default {
  name: "studentEvaluation",

  data() {
    return {
      loading: false,
      saveLoading: false,
      list: [],
      form: {},
      // 表单校验
      rules: {
        evaluationText: [{ required: true, message: "评价描述不能为空", trigger: "blur" }],
      }
    };
  },
  created() {
    this.getList();
  },
  props: {
    // 班级id
    studentId: {
      type: String,
      default: "",
    },

    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },
  },
  watch: {
    studentId(val) {
      this.getList();
    },
  },
  methods: {
    /** 查询评价列表 */
    getList() {
      this.loading = true;
      // 根据学生id获取学生评价列表
      searchEvaluation({ studentId: this.studentId }).then((response) => {
        this.list = response.data;
        console.log(this.list);
        // this.list = [{evaluationText:"优秀"},{evaluationText:"良好"},{evaluationText:"差"}]
        this.loading = false;
        debugger
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.saveLoading = true;
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        this.form.teacherId = this.$store.getters.userId;
        this.form.studentId = this.studentId;
        // 添加评价
        createEvaluation(this.form).then(response => {
          this.$modal.msgSuccess("评价成功");
          this.cancel();
          // this.$emit('success');
          this.saveLoading = false;
        });
      });
    },


    cancel() {
      this.$emit("update:show", false);
      this.reset();
    },

    /** 表单重置 */
    reset() {
      this.form = {
        studentId: undefined,
        teacherId: undefined,
        evaluationText: undefined,
      };
      this.resetForm("form");
    },
  },
};
</script>
<style scoped>
.item {
  margin: 10px 0;
}
.line {
  border: 2px solid #999999;
  margin: 10px 0;
}

.item-row {
  border: 1px solid #c0c4cc;
  color: #c0c4cc;
  font-weight: bolder;
  margin-top: 10px;
}

.evaluation-body {
  max-height: 40vh;
  overflow-y: auto;
}
</style>
